<!DOCTYPE html>
<html class="x-admin-sm">

<head>
    <meta charset="UTF-8">
    <title>视频上传</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
    <link rel="stylesheet" href="/layuiadmin/layui/css/layui.css" media="all"/>
    <link rel="stylesheet" href="/layuiadmin/style/admin.css" media="all"/>
    <script src="/static/md5.js"></script>
    <!--[if lt IE 9]>
    <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
    <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>

<body>
<div class="layui-fluid">
    <div class="layui-row" style="margin: auto auto;">
        <div class="layui-form layui-card-header layuiadmin-card-header-auto">
            <form class="layui-form layui-col-space5" id="sbumitForm">
                <div class="layui-form-item">
                    <div class="layui-inline ">
                        <div class="layui-input-inline">
                            <div class="layui-btn" id="Upload">
                                视频上传
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
    <div class="layui-card-body layui-table-body layui-table-main">
        <table  class="layui-table layui-input-block">
            <thead id="uploadListHead" style="display: none">
            <tr>
                <th style="text-align:center">文件名</th>
                <th style="text-align:center;width:12%;">大小</th>
                <th style="text-align:center;width:28%;">状态</th>
                <th style="text-align:center;width:20%;">操作</th>
            </tr>
            </thead>
            <tbody id="uploadList">

            </tbody>
        </table>
    </div>
</div>
<script src="/layuiadmin/layui/layui.js"></script>
<script>
    file_arr = {};
    video_upload_key = '<?php echo $video_upload_key;?>';
    layui.use(['form', 'layer', 'upload'], function () {
        $ = layui.jquery;
        var form = layui.form, layer = layui.layer, upload = layui.upload;
        upload.render({
            elem: '#Upload',
            auto: false,
            accept: 'video',
            exts: 'mp4',
            drag: true,
            choose: function (obj) {
                obj.preview(function (index, file, result) {
                    var md5 = hex_md5(file.name);
                    if (file_arr.hasOwnProperty(md5)) {
                        layer.msg('该视频已在上传列表中,请勿重新选择!', {icon: 2, time: 6000});
                        document.getElementById("sbumitForm").reset();
                        return false;
                    }

                    file_arr[md5] = {};
                    var forminfo = {};
                    forminfo.file_name = file.name;
                    forminfo.file_type = file.type;

                    file_arr[md5].video= file_fragment(file, 0);
                    file_arr[md5].forminfo = forminfo;

                    $('#uploadListHead').show();

                    var htmlstr = '';
                    htmlstr += '<tr id="' + md5 + '"><td style="text-align:center">' + file.name + '</td>';
                    htmlstr += '<td style="text-align:center;">' + (file.size / 1024 / 1024).toFixed(2) + 'M</td>';
                    htmlstr += '<td style="text-align:center;">';
                    htmlstr += '<div class="layui-progress layui-progress-big"><div class="layui-progress-bar" lay-percent="0%" style="width: 0%;"></div></div>';
                    htmlstr += '</td>';
                    htmlstr += '<td style="text-align:center;width:20%">';
                    htmlstr += '<input type="hidden" name="' + md5 + '" value="0" data="1" />';
                    htmlstr += '<button class="layui-btn layui-btn layui-btn-xs" style="background-color: #1E9FFF"  onclick="upload(\'' + md5 + '\')" >上传</button>';
                    htmlstr += '<button class="layui-btn layui-btn layui-btn-xs"  onclick="suspended(\'' + md5 + '\')" >暂停</button>';
                    htmlstr += '<button class="layui-btn layui-btn-warm layui-btn-xs"  onclick="continueto(\'' + md5 + '\')" >继续</button>';
                    htmlstr += '<button class="layui-btn-danger layui-btn layui-btn-xs"  onclick="delupload(\'' + md5 + '\')" href="javascript:;" >';
                    htmlstr += '<i class="layui-icon">&#xe640;</i>删除</button></td></tr>';
                    $("#uploadList").append(htmlstr);

                    document.getElementById("sbumitForm").reset();
                });
            }
        });
    });

    /**文件分段*/
    function file_fragment(file, skip, arr = []) {
        var formData = new FormData();
        var blockSize = 1024 * 1024 / 2;
        var nextSize = Math.min((skip + 1) * blockSize, file.size);
        var fileData = file.slice(skip * blockSize, nextSize);
        formData.append("file", fileData);
        formData.append("filename", file.name);
        formData.append("index", skip);
        arr.push(formData);
        if (file.size > nextSize) {
            return file_fragment(file, ++skip, arr);
        }

        return arr;
    }

    /**文件上传请求*/
    function ajax_post_upload(formData, md5, num) {
        var defer = $.Deferred()
        formData.append("md5", md5);
        formData.append("video_upload_key", video_upload_key);
        $.ajax({
            url: "<?php echo $url;?>/index/upload",
            type: "POST",
            dataType: "json",//返回的数据类型
            data: formData,
            //async:false,
            processData: false,
            contentType: false,
            success: function (data) {
                if (data.code == 0) {
                    shard_upload(md5, num + 1);
                }
                defer.resolve(data);
            }
        });
        return defer.promise();
    }

    /**文件合并请求*/
    function mergefile(formData) {
        $.ajax({
            url: "<?php echo $url;?>/index/merge",
            type: "POST",
            dataType: "json",//返回的数据类型
            data: formData,
            success: function (data) {
            }
        });
    }

    function upload(md5) {
        // 0 暂停上传 1 正常 第一次上传 2 正在上传中 3 上传完毕
        var inputtmp = parseInt($("input[name=" + md5 + "]").attr('data'));
        if (inputtmp == 0) {
            layer.msg(file_arr[md5].forminfo.file_name + ' 已暂停上传', {icon: 2, time: 2000});
            return false;
        }
        if (inputtmp == 2) {
            layer.msg(file_arr[md5].forminfo.file_name + ' 正在上传中', {icon: 2, time: 2000});
            return false;
        }
        if (inputtmp == 3) {
            layer.msg(file_arr[md5].forminfo.file_name + ' 上传完毕 请勿重新上传', {icon: 2, time: 2000});
            return false;
        }
        shard_upload(md5, 0);
    }

    /**分片上传处理*/
    function shard_upload(md5, num) {
        var inputdata = parseInt($("input[name=" + md5 + "]").attr('data'));

        if (inputdata == 1 || inputdata == 2) {
            //var videoindex  = parseInt($("input[name="+md5+"]").val());
            if (num < file_arr[md5].video.length) {
                var percentage = (num + 1) / file_arr[md5].video.length * 100;
                $("#" + md5).find(".layui-progress-bar").width(percentage + "%");
                ajax_post_upload(file_arr[md5].video[num], md5, num);
                $("input[name=" + md5 + "]").val(num + 1);
                $("input[name=" + md5 + "]").attr('data', 2);
            } else {
                if (num == (file_arr[md5].video.length)) {
                    file_arr[md5].forminfo.type = "video";
                    file_arr[md5].forminfo.md5 = md5;
                    file_arr[md5].forminfo.video_upload_key = video_upload_key;
                    file_arr[md5].forminfo.index = num - 1;
                    mergefile(file_arr[md5].forminfo);
                    $("input[name=" + md5 + "]").attr('data', 3);//上传完毕
                    delupload(md5);
                    layer.msg('上传完毕', {icon: 1, time: 2000});
                }
            }
        }
    }

    /**暂停上传*/
    function suspended(md5) {
        var inputtmp = parseInt($("input[name=" + md5 + "]").attr('data'));
        if (inputtmp == 0) {
            layer.msg(file_arr[md5].forminfo.file_name + ' 已暂停上传', {icon: 2, time: 2000});
            return false;
        }
        if (inputtmp == 1) {
            layer.msg(file_arr[md5].forminfo.file_name + ' 文件未开始上传', {icon: 2, time: 2000});
            return false;
        }
        if (inputtmp == 3) {
            layer.msg(file_arr[md5].forminfo.file_name + ' 上传完毕 请勿重新上传', {icon: 2, time: 2000});
            return false;
        }
        layer.confirm('确认要暂停吗？', function (index) {
            $("input[name=" + md5 + "]").attr('data', "0");
            layer.msg('已暂停', {icon: 1, time: 1000});
        });
    }

    /**继续上传*/
    function continueto(md5) {
        var inputdata = parseInt($("input[name=" + md5 + "]").attr('data'));
        if (inputdata == 1) {
            layer.msg(file_arr[md5].forminfo.file_name + ' 文件未开始上传,无法继续', {icon: 2, time: 2000});
            return false;
        }
        if (inputdata == 2) {
            layer.msg(file_arr[md5].forminfo.file_name + ' 正在上传中', {icon: 2, time: 2000});
            return false;
        }

        if (inputdata == 3) {
            layer.msg(file_arr[md5].forminfo.file_name + ' 上传完毕 请勿重新上传', {icon: 2, time: 2000});
            return false;
        }

        var videoindex = parseInt($("input[name=" + md5 + "]").val());
        if (videoindex == file_arr[md5].video.length) {
            layer.msg(file_arr[md5].forminfo.file_name + ' 文件已上传完毕', {icon: 2, time: 2000});
            return false;
        }
        layer.confirm('确认要继续上传吗？', function (index) {
            $("input[name=" + md5 + "]").attr('data', 2);
            shard_upload(md5, parseInt($("input[name=" + md5 + "]").val()));
            layer.msg(file_arr[md5].forminfo.file_name + ' 正在恢复上传', {icon: 1, time: 1000});
        });
    }

    /**删除上传*/
    function delupload(md5) {
        delete file_arr[md5];
        $("#" + md5).remove();
        var length = $('#uploadList').children().length;
        if (length == 0) {
            $('#uploadListHead').hide();
        }
    }

</script>
</body>
</html>